<template>
   <view>
     <MySearch @click="onSearch" />
      <view class="scroll-view-container">
        <!-- 左侧的滚动视图区域 -->
        <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
          <view
          class="left-scroll-view-item"
          :class="activeId === item.cat_id ? 'active' : ''"
          v-for="item in cateList" :key="item.cat_id"
          @click="changeMenus(item)"
          >
          {{ item.cat_name }}
          </view>
        </scroll-view>
        <!-- 右侧的滚动视图区域 -->
        <scroll-view
        class="right-scroll-view"
        scroll-y
        :scroll-top="scrollTop"
        :style="{height: wh + 'px'}">
          <view class="cate-lv2" v-for="item in cateLevel2" :key="item.cat_id">
              <view class="cate-lv2-title">/ {{item.cat_name}} /</view>
              <!-- 动态渲染三级分类的列表数据 -->
              <view class="cate-lv3-list">
                <!-- 三级分类 Item 项 -->
                <view
                class="cate-lv3-item"
                v-for="obj in item.children"
                :key="obj.cat_id"
                @click="toGoodsList(obj)"
                >
                  <!-- 图片 -->
                  <image :src="obj.cat_icon"></image>
                  <!-- 文本 -->
                  <text>{{obj.cat_name}}</text>
                </view>
              </view>
            </view>
        </scroll-view>
      </view>
    </view>
</template>

<script>
  import MySearch from '../../components/my-search/my-search.vue'
  export default {
    data() {
      return {
          // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
          wh: 0,
          cateList: [],
          // 默认激活大家电
          activeId: 1,
          cateLevel2: [],
          scrollTop:0
      };
    },
    onLoad() {
          // 获取当前系统的信息
          const sysInfo = uni.getSystemInfoSync()
          // 为 wh 窗口可用高度动态赋值
          this.wh = sysInfo.windowHeight - 50
          // 获取分类列表
          this.loadCateList()
        },
     methods:{
       // 加载分类列表
       async loadCateList() {
         const { data: { message, meta } } = await uni.$http.get('/api/public/v1/categories')
         if(meta.status !== 200) return uni.$showMsg()
         this.cateList = message
         this.cateLevel2 = message[0].children
       },
       // 切换菜单选项
       changeMenus(item) {
         this.activeId = item.cat_id
         this.cateLevel2 = item.children
         this.scrollTop = this.scrollTop === 0 ? 1 : 0
       },
       // 点击图片去商品列表
       toGoodsList(item) {
         uni.navigateTo({
           url:`/subpkg/goods_list/goods_list?cid=${item.cat_id}`
         })
       },
       // 搜索
       onSearch() {
         uni.navigateTo({
           url: '/subpkg/search/search'
         })
       }
     },
     components:{
       MySearch
     }
  }
</script>

<style scoped lang="scss">
.scroll-view-container {
  display: flex;

  .left-scroll-view {
    width: 120px;

    .left-scroll-view-item {
      line-height: 60px;
      background-color: #f7f7f7;
      text-align: center;
      font-size: 12px;

      // 激活项的样式
      &.active {
        background-color: #ffffff;
        position: relative;

        // 渲染激活项左侧的红色指示边线
        &::before {
          content: ' ';
          display: block;
          width: 3px;
          height: 30px;
          background-color: #c00000;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
    .right-scroll-view {
      .cate-lv2-title {
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        padding: 15px 0;
      }
      .cate-lv3-list {
        display: flex;
        flex-wrap: wrap;
      
        .cate-lv3-item {
          width: 33.33%;
          margin-bottom: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
      
          image {
            width: 60px;
            height: 60px;
          }
      
          text {
            font-size: 12px;
          }
        }
      }
    }
}
</style>
